<template>
    <div class="three-col-item-complex clearfix" :class="{'border-top': borderTop, 'border-bottom': borderBottom}">
        <img :src="avatar" class="avatar" data-avatar="1" />
        <div v-if="hint1 || hint2" class="hint-wrap">
            <div v-if="hint1" class="hint1"
                :class="hint1Class"
                :style="{'pointer-events': hint1Visible ? 'auto' : 'none', 'opacity': hint1Visible ? '1' : '0'}"
                @click="onClickHint1">
                {{hint1}}
            </div>
            <div v-if="hint2" class="hint2" :class="hint2Class">
                <slot name="hint2">{{hint2}}</slot>
            </div>
        </div>
        <div class="text-wrap">
            <div class="text1" :class="text1Class">{{text1}}</div>
            <div class="text2" :class="text2Class">{{text2}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ThreeColItemComplex',
    props: {
        avatar: { type: String },
        text1: { type: String },
        text1Class: { type: [ Object, Array ] },
        text2: { type: String },
        text2Class: { type: [ Object, Array ] },
        hint1: { type: String },
        hint1Class: { type: [ Object, Array ] },
        hint1Visible: { type: Boolean, default: true },
        hint2: { type: String },
        hint2Class: { type: [ Object, Array ] },
        borderTop: { type: Boolean, default: false },
        borderBottom: { type: Boolean, default: false },
    },
    methods: {
        onClickHint1() {
            if (this.hint1Visible) {
                this.$emit('click-hint-1');
            }
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.three-col-item-complex {
    padding: 10px 14px;
    &.border-top {
        border-top: 1px solid #ebebeb;
    }
    &.border-bottom {
        border-bottom: 1px solid #ebebeb;
    }
    .avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .hint-wrap {
        float: right;
        // padding-top: 5px;
        text-align: right;
        .hint1 {
            // .text-normal();
        }
    }
    .text-wrap {
        overflow: hidden;
        .text1 {
            padding: 4px 0 0 10px;
            .text-huge();
        }
        .text2 {
            padding: 0 0 0 10px;
            .text-small();
            color: #666666;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
</style>